<template>
    <!-- 页面容器，支持安全区域适配和主题模式 -->
    <view :class="[ns.b(), systemStore.safeAreaBottomClass]" :style="domStyle" mode="light">
        <!-- 头部区域，根据 header 属性决定是否显示 -->
        <template v-if="header">
            <!-- 使用 i-header 组件渲染标题 -->
            <i-header v-bind="$attrs">
                <text>{{ title }}</text>
            </i-header>
        </template>

        <!-- 内容区域容器 -->
        <view class="i-container-wrapper">
            <!-- 插槽，用于插入页面内容 -->
            <slot />
        </view>

        <!-- 底部导航栏区域 -->
        <template v-if="tabBar">
            <!-- 固定定位占位元素 -->
            <view class="menu-fixed-placeholder">
                <!-- 使用过渡动画控制底部导航栏的显示与隐藏 -->
                <uni-transition mode-class="fade" :duration="300" :show="showTabBar">
                    <!-- 底部导航栏组件 -->
                    <i-tabber @tab-bar="onTabBarEvent" />
                </uni-transition>
            </view>
        </template>
    </view>
</template>

<script setup lang="ts">
import { iContainerKey } from "@/components/i-container/key";
import { useSystemStore, type TabBarType } from "@/store";
import { REPORT_EVENT_TYPE, useNamespace, useReportEvent } from "@/hooks";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";

dayjs.extend(duration);

const ns = useNamespace("container");

/**
 * 定义事件发射器
 * @param event 事件名称
 * @param args 事件参数
 */
const emits = defineEmits(["tabBar"]);

// 使用系统状态管理
const systemStore = useSystemStore();

/**
 * 定义组件接收的属性
 * @property title 页面标题，默认为空字符串
 * @property header 是否显示头部，默认为 false
 * @property tabBar 是否显示底部导航栏，默认为 false
 * @property safeAreaInsetBottom 是否开启底部安全区域适配，默认为 true
 * @property containerBackground 容器背景色，默认为 "#f7f7f7"
 * @property showTabBar 是否显示底部导航栏，默认为 true
 */
const props = defineProps({
    title: {
        type: String,
        default: ""
    },
    header: {
        type: Boolean,
        default: false
    },
    tabBar: {
        type: Boolean,
        default: false
    },
    safeAreaInsetBottom: {
        type: Boolean,
        default: true
    },
    containerBackground: {
        type: String,
        default: "#f7f7f7"
    },
    showTabBar: {
        type: Boolean,
        default: true
    }
});

/**
 * 计算容器样式，设置背景色变量
 * @returns 返回包含背景色 CSS 变量的对象
 */
const domStyle = computed(() => ({
    ["--bg-color"]: props.containerBackground
}));

/**
 * 处理底部导航栏点击事件
 * @param param 包含被点击项和索引的对象
 * @param param.item 被点击的导航项数据
 * @param param.index 被点击项的索引
 */
const onTabBarEvent = ({ item, index }: { item: TabBarType; index: number }) => {
    emits("tabBar", {
        index,
        item
    });
};

// 向子组件提供配置信息
provide(iContainerKey, {
    safeAreaInsetBottom: props.safeAreaInsetBottom
});

let remain_start_timestamp = 0,
    remain_end_timestamp = 0;

onShow(() => {
    remain_start_timestamp = new Date().getTime();
});

onHide(() => {
    remain_end_timestamp = new Date().getTime();

    useReportEvent(REPORT_EVENT_TYPE.PAGE_REMAIN_TIME, {
        remain_seconds: dayjs
            .duration(remain_end_timestamp - remain_start_timestamp)
            .asSeconds()
            .toFixed(2),
        remain_minutes: dayjs
            .duration(remain_end_timestamp - remain_start_timestamp)
            .asMinutes()
            .toFixed(2)
    });
});
</script>

<style scoped lang="scss">
@import "./index";
</style>
